<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商城</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/style.css?1001" rel="stylesheet" />
		<script src="../js/flexible.js"></script>
		<script src="../js/flexible_css.js"></script>
		<script src="../js/jquery-1.9.1.min.js"></script>
		<script src="../js/axios-proxy.js"></script>
		<script src="../conf.js"></script>
		<script src="../js/api.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			body{
      background-color: #fff;
    }
  </style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav mall-box-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商城</h1>
			<div class="custom-head mui-input-row">
				<input type="search" class="mui-input" placeholder="搜索商品">
			</div>
		</header>
		<div class="currency-box mall-box" id="app">
			<div class="menu-head">
				<ul class="menu-head-ul clearfix">
					<li :class="controllMall === 1 ? 'active' : '' " @click="mallLeft(1)">精选</li>
					<li :class="controllMall === 2 ? 'active' : '' " @click="mallLeft(2)">分类</li>
				</ul>
			</div>
			<!--精选-->
			<div :class="['mall-menu-home', controllMall === 1 ? 'active' : '']">
				<div class="mui-slider mui-slider-mall">
					<div class="mui-slider-group">
						<div class="mui-slider-item"><a href="#"><img src="../images/banner.png" /></a></div>
					</div>
				</div>
				<!--精选-->
				<div class="custom-offer">
					<ul class="custom-offer-commodity">
						<li href="mall-home-details.html" @click="customnav(inter.num_iid,inter.coupon_click_url,inter.coupon_info)" class="clearfix" v-for="inter in mallCommoditylist">
							<img :src="inter.pict_url" alt="">
							<div class="selected-commodity-content">
								<h6 class="selected-commodity-title">
									{{inter.title}}
								</h6>
								<span class="commodity-price selected-commodity-price">￥{{inter.zk_final_price}}</span>
								<span class="commodity-reduce selected-commodity-shan-price">{{inter.reserve_price}}</span>
								<span class="commodity-sold">已售{{inter.volume}}</span>
								<span class="commodity-coupon selected-commodity-coupon">{{inter.coupon_info}}</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!--分类-->
			<div :class="['mall-menu-home', controllMall === 2 ? 'active' : '']">
				分类
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			//主列表点击事件
			$('body').on('click', '#custom-nav li', function() {
				var href = this.getAttribute('href');
				Sessionstorage.setItem('id', )
				openwind(href)
			})
			const mallMenuHome = $('.mall-menu-home');
			const mallMenuHead = $('.menu-head-ul li');

			function mallLeft(num) {
				mallMenuHead.removeClass('active');
				mallMenuHome.removeClass('active');
				mallMenuHead.eq(num).addClass('active');
				mallMenuHome.eq(num).addClass('active');
			}
			document.addEventListener("swipeleft", function(e) {
				// console.log("你正在向1滑动",e);
				mallLeft(0);
			});
			document.addEventListener("swiperight", function(e) {
				// console.log("你正在向右滑动",e);
				mallLeft(1);
			});
			let vm = new Vue({
				el: "#app",
				data: {
					mallCommoditylist: [],
					controllMall: 1,
					codemsg: '',
					pageSize: 20
				},
				created: function() {
					// this.getmallCommodity()
					mui.init({
						pullRefresh: {
							container: '#app', //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
							down: {
								style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
								color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
								height: '50px', //可选,默认50px.下拉刷新控件的高度,
								range: '100px', //可选 默认100px,控件可下拉拖拽的范围
								offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
								auto: true, //可选,默认false.首次加载自动上拉刷新一次
								callback: this.getmallCommodity //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							},
							up: {
								height: 50, //可选.默认50.触发上拉加载拖动距离
								auto: false, //可选,默认false.自动上拉加载一次
								contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
								contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
								callback: this.getmallCommodity //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							}
						}
					});
				},
				methods: {
					getmallCommodity: function() {
						this.pageSize += 10;
						getcommodity({
							pageSize: this.pageSize,
							subordinate:2,
						}, function(res) {
							// vm.codemsg = res.result;
							vm.mallCommoditylist = res.results.uatm_tbk_item;
							vm.$nextTick(function() {
								refreshContainer('#app');
								var controller = true;
								if(res.results.uatm_tbk_item.length < vm.pageSize){
									controller = true;
								} else {
									controller = false;
								}
								endPullupToRefresh('#app', controller)
							})
						})
					},
					customnav: function(id, url, coupon) {
						localStorage.setItem('mallJson', JSON.stringify({
							mallId: id,
							mallURL: url,
							mallcoupon: coupon.substr(coupon.lastIndexOf("元") + - 1)
						}));
						openwind('mall-home-details.html')
					},
					mallLeft: function(val) {
						this.controllMall = val;
					}
				}
			});
		</script>
	</body>

</html>
